import * as echarts from 'echarts'



export default {
  animation: true,
  series: (chartList) => {
    const series = [];
    const centerY = 50; // 原点y轴的单位距离
    const centerYOffset = 5; // 原点偏移
    const centerX = 100 / 2; // 原点x轴的单位距离
    const colors = ['#80E6FF', '#FF8B04', '#F27575', '#BE57FF']
    const colorsBorder = ['#80E6FF', '#FFBA69', '#F27575', '#D798FF']
    console.log(colorsBorder)
    // const chartList = [{
    //   value: 20,
    //   total: 30,
    //   name: 'VR单车'
    // }, {
    //   value: 6,
    //   total: 12,
    //   name: '骑马机'
    // }, {
    //   value: 8,
    //   total: 40,
    //   name: '科普机'
    // }, {
    //   value: 12,
    //   total: 60,
    //   name: '唱吧'
    // }];
    chartList.forEach((item, index) => {
      const radius = 30;
      const borderWidth = 25;
      const titleSize = 24;
      const valueSize = 55;
      const ratio = item.value / item.total * 360;
      const center = [
        centerX * (index % 2) + centerX / 2 + '%',
        centerY * Math.floor(index / 2) + centerY / 2 - centerYOffset + '%'
      ];
      series.push({ // 内圆背景
        type: 'pie',
        radius: radius + '%',
        center,
        z: 1,
        itemStyle: {
          color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.8, [{
              offset: 0,
              color: '#092a5d'
            },
            {
              offset: 0.3,
              color: '#092a5d'
            },
            {
              offset: 1,
              color: colorsBorder[index]
            }
          ], false),
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        },
        label: {
          show: false
        },
        tooltip: {
          show: false
        },
        data: [100]
      }, { //  内圆边框
        type: 'pie',
        radius: [radius + '%', radius - 0 + '%'],
        center,
        // clockWise: false,
        z: 2,
        itemStyle: {
          shadowBlur: 20,
          shadowColor: '#0e829b',
          color: '#0e829b'
        },
        label: {
          show: false
        },
        data: [100]
      }, { // 进度
        type: 'gauge',
        radius: radius + '%',
        startAngle: 90,
        endAngle: ~ratio + 91,
        center,
        z: 3,
        axisLine: {
          lineStyle: {
            width: borderWidth,
            color: [
              [1, new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [{
                    offset: 0,
                    color: colors[index]
                  },
                  {
                    offset: 1,
                    color: colors[index]
                  }
                ]
              )]
            ]
          }
        },
        pointer: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        detail: {
          valueAnimation: true,
          formatter: () => `${item.value}`,
          offsetCenter: [0, 0],
          fontSize: valueSize,
          fontWeight: 'bolder',
          color: colors[index]
        },
        title: {
          offsetCenter: [0, '165%'],
          fontSize: titleSize,
          color: '#fff'
        },
        data: [item]
      }, { // 内圆刻度
        type: 'gauge',
        startAngle: 90,
        endAngle: -270,
        radius: radius + '%',
        z: 4,
        center,
        splitNumber: 80,
        axisLine: {
          show: false
        },
        pointer: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          distance: -10,
          length: borderWidth,
          lineStyle: {
            color: colorsBorder[index],
            width: 2
          }
        },
        axisLabel: {
          show: false
        }
      }, { // 外圆
        type: 'pie',
        z: 5,
        radius: [radius + 4 + '%', radius + 3.5 + '%'],
        center,
        // clockWise: false,
        itemStyle: {
          shadowBlur: 10,
          shadowColor: colorsBorder[index],
          color: colorsBorder[index]
        },
        label: {
          show: false
        },
        data: [100]
      }, { // 为了添加点击事件添加遮罩
        type: 'pie',
        z: 6,
        radius: [radius + 5 + '%', 0],
        center,
        // clockWise: false,
        itemStyle: {
          shadowBlur: 20,
          shadowColor: 'transparent',
          color: 'transparent'
        },
        label: {
          show: false
        },
        data: [item]
      });
    });
    return series
  }
};